<!DOCTYPE html>
<html>
    <head>
	    <title>CCC Samples - Bar</title>

	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/jquery.js"></script>

	    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/jquery.tipsy.js"></script>
	    <link type="text/css" href="../ccc-js/src/main/javascript/package-res/lib/tipsy.css" rel="stylesheet"/>

	    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/protovis.js"></script>
	    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/protovis-msie.js"></script>
	    <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/lib/tipsy.js"></script>

	    <script type="text/javascript" src="data/q01-01.js"></script>




        <!-- @SCRIPTSBEG@ -->
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/shim.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/prologue.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/object.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/info.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/bit.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/fun.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/number.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/array.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/string.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/conversion.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/predicate.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/error.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/log.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/private.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/varia.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/qualifiedName.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/namespace.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/describe.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/mixin.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/create.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/attached.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/configure.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/inherit.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/overrides.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/methods.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/MetaType.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/Object.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/type.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/enum.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/classify.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/type/fields.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/id.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/collection/Set.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/collection/Map.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/collection/OrderedMap.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/EventSource.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/html.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/css.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/query.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/textTable.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/math.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/def/epilogue.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/_data.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/meta/dimensionType.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/meta/complexType.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/meta/complexTypeProject.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/atom.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/complex.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/complexView.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/datum.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/dimension.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data.selected.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data.operations.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data-filtered.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data-grouped.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/data/data.compat.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/abstract-oper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/grouping-oper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/groupingSpec.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/linear-interp-oper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/linear-interp-seriesState.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/zero-interp-oper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/oper/zero-interp-seriesState.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/translation/abstract-transl.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/translation/abstract-matrix-transl.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/translation/crosstab-transl.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/translation/relational-transl.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/number-formatStyle.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/number-format.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/date-format.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/custom-format.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/formatProvider.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/cdo/format/format-language.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/shims.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/prologue.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/extension.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/colorScheme.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/time.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/mark.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/enums.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/offset.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/percentValue.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/sides.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/value/size.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/abstract.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/optionsMgr.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/abstract-options.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/abstract-interactive.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/color.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/context.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/text.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/trends.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/spec.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/slidingWindow.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/scene/scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/scene/var.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/visualRole/visualRole.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/visualRole/visualRolesBinder.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/visualRole/visualRoleVarHelper.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/dataCell/dataCell.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/dataCell/color-dataCell.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/axis/axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/axis/color-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/axis/size-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/axis/normalized-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/panel/panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/content-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/plot/plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/plot/plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/plot/plotBg-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/legend-options.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/legend-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-root-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-group-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-item-sceneSection.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-item-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-item-scene.selection.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/scene/legend-item-scene.visibility.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/legend/legendSymbolRenderer.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/title/abstract-title-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/title/title-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/panel/dockingGrid-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.visualRoles.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.data.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.plots.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.axes.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.panels.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.selection.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.extension.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/chart/chart.activeScene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/multi/multiChart-options.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/multi/multiChart-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/multi/smallChart-options.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/base-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/panel-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/label-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/value-label-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/dot-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/dotSizeColor-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/line-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/area-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/bar-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/base/sign/rule-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/discrete-bands-layout.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/cart-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/root-cart-axis-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/tick-cart-axis-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/abstract-cart-axis-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/axis/cart-axis-title-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-focusWindow.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/ortho-cart-dataCell.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-dockingGrid-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/cartesian/cart-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/categorical/categ-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/categorical/categ-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/core/categorical/categ-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-metricxy/abstract-metricxy-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-metricxy/abstract-metricxy-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-bar/abstract-bar-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-bar/abstract-bar-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/abstract-bar/abstract-bar-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/pie/pie-slice-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/pie/pie-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/pie/pie-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/pie/pie-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bar/bar-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bar/bar-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bar/bar-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/nbar/nbar-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-legend-group-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-legend-item-scene.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/water/water-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/point/point-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/point/point-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/point/point-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/scatter/scatter-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/scatter/scatter-size-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/scatter/scatter-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/scatter/scatter-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/heatGrid/hg-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/heatGrid/hg-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/heatGrid/hg-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/box/box-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/box/box-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/box/box-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/treemap/treemap-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/treemap/treemap-color-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/treemap/treemap-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/treemap/treemap-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-color-axis.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-plot-panel.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/sunburst/sun-slice-sign.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bullet/bullet-plot.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/bullet/bullet-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/parallel/par-chart.js"></script>
        <script type="text/javascript" src="../ccc-js/src/main/javascript/package-res/ccc/plugin/dataTree/dt-chart.js"></script>
        <!-- @SCRIPTSEND@ -->
        <link type="text/css" href="lib/codemirror/codemirror.css" rel="stylesheet"/>
        <script src="lib/codemirror/codemirror.js" type="text/javascript"></script>
        <script src="lib/codemirror/javascript.js" type="text/javascript"></script>

        <script type="text/javascript" src="pvcDocUtils.js"></script>
        <link type="text/css" href="pvcDocUtils.css" rel="stylesheet"/>
    </head>
    <body>

        <h1>Bar Chart</h1>
        Bar charts are used for plotting data which has discrete values. The lengths of the bars are
        proportional to the values that they represent.

<h2>Chart Options</h2>
<h4>Dimensions</h4>
<ul>
  <li>width</li>
  <li>height</li>
  <li>margins -
      css-like margins shorthand syntax (without units) or object with properties 'all', 'top', 'bottom', 'left' and/or 'right'.
      Margins consume the chart's width and height (inside margins).
  </li>

</ul>
<h4>Title properties</h4>
<ul>
  <li>title</li>
  <li>titlePosition</li>

  <li>titleSize</li>
</ul>
<h4>Lifecycle</h4>
<ul>
  <li>renderCallback - executed immediatly before render is called</li>
</ul>
<h4>Legend properties</h4>
<ul>
  <li>legend (true|false)</li>
  <li>legendPosition (right, top, bottom, left)</li>
  <li>legendAlign (right, left, center, top, middle, bottom)</li>
  <li>legendSize</li>
  <li>legendDrawLine (true|false)</li>
  <li>legendDrawMarker (true|false)</li>
  <li>tooltipEnabled (true|false)</li>
</ul>
<h4>Bar properties</h4>
<ul>
  <li>orientation (horizontal | vertical)</li>
  <li>valuesVisible (true|false)</li>
  <li>stacked (true|false)</li>
  <li>axisBandSizeRatio - Ratio of occupied vs total size of category band. Default: 0.9 (90%)</li>
  <li>barSizeRatio - In multiple series, percentage of inner band occupied by bars. Default: 0.9 (90%)</li>
  <li>barSizeMax - Maximum size of a bar in pixels.</li>
  <li>barStackedMargin - Margin that separates (stacked) bars, in pixels. Default: 0</li>
</ul>
<h4>Line properties</h4>
<ul>
  <li>linesVisible - Show or hide lines. Default: true</li>
  <li>dotsVisible - Show or hide dots. Default: false</li>
  <li>areasVisible - Show or hide areas. Default: false</li>
  <li>nullInterpolationMode (none | linear) - Interpolation mode for lines. Default: 'none'</li>
</ul>
<h4>Axis properties</h4>
<ul>
  <li>show{X,Y}Scale (true | false) - whether to show an axis. Default: true</li>
  <li>plot2 (true | false) - whether to show the second axis. Default: false</li>
  <li>xAxisPosition (bottom | top) - the position of the X axis. Default: bottom</li>
  <li>yAxisPosition (left | right) - the position of the Y axis. Default: left</li>
  <li>{x,y}AxisSize - the size of <i>free dimension</i> of an axis (X: height, Y: width). Default: 50</li>
  <li>{x,y}AxisGrid (true | false) - show lines on all (major) ticks, except the first and the last. Default: false</li>
  <li>{x,y}AxisEndLine (true | false) - show a line on the last (major) tick. Default: false</li>
  <li>{x,y,second}AxisTitle - The axis title text. Default: null</li>
  <li>{x,y,second}AxisTitleFont - The axis title font. Default: '10px sans-serif'</li>
  <li>{x,y,second}AxisTitleSize - The size of the axis title.
      The size is the width when the axis is vertical and the height when it is horizontal.
      The title consumes space from the specified {x|y|second}AxisSize.
      Default: The required by the font height plus a proportional margin.</li>
  <li>{x,y,second}AxisDomainRoundMode (none | nice | tick) - rounding mode of the domain bounds of a linear scale axis. Default: none</li>
  <li>{x,y,second}AxisDesiredTickCount - desired number of (major) ticks of a linear scale axis. Default: 5</li>
  <li>{x,y,second}AxisMinorTicks (true|false) - show minor ticks on a linear scale axis. Default: true</li>
  <li>secondAxisIdx - Array of indexes of the series that are shown as lines.</li>
  <li>secondAxisIndependentScale (true | false) - if the second axis has an independent scale</li>
  <li>secondAxisOriginIsZero (true | false) - if the second axis should show the 0 value at the origin. Default: true</li>
  <li>color2AxisColors - line and scale color. Default: blue</li>
</ul>


<h2>Extension Points</h2>
The following&nbsp;list&nbsp;serves as the basis
for&nbsp;Bar extension points:
<ul>
  <li>base_</li>
  <li>title_</li>
  <li>titleLabel_</li>
  <li>legendArea_</li>
  <li>legendPanel_</li>
  <li>legendRule_</li>
  <li>legendDot_</li>
  <li>legendLabel_</li>
  <li>{x,y,secondY}Axis_</li>
  <li>{x,y,secondY}AxisRule_</li>
  <li>{x,y,secondY}AxisGrid_</li>
  <li>{x,y,secondY}AxisScale_</li>
  <li>{x,y,secondY}AxisTicks_</li>
  <li>{x,y,secondY}AxisMinorTicks_</li>
  <li>{x,y,secondY}AxisLabel_</li>
  <li>{x,y,secondY}AxisTitleLabel_</li>
  <li>tooltip_</li>
  <li>barLabel_</li>
  <li>barPanel_</li>
  <li>bar_</li>
  <li>barUnderflowMarker_</li>
  <li>barOverflowMarker_</li>
  <li>chart_</li>
</ul>

Sample extension points:<br>

<ul>
  <li>bar_fillStyle: for setting the bars fill colors.</li>
  <li>bar_strokeStyle and bar_lineWidth: for setting the stroke
color&nbsp;and thickness.</li>
  <li>titleLabel_font</li>
  <li>yAxisRule_strokeStyle</li>
  <li>barLabel_textAngle</li>
  <li>xAxisScale_dateTickPrecision</li>
</ul>

<div style="padding-left: 40px">
<h2>Examples</h2>
<h3>A simple Bar chart</h3>
For drawing a very simple bar chart, just provide the data and set the orientation of the bars.<br>

<div class="tryItTable">
<div>
<div>
<textarea cols="90" rows="21" id="pvcBar1Code">
new pvc.BarChart({
    canvas: "pvcBar1",
    width:  400,
    height: 300,
    tooltip: {followMouse: true},
    animate:    false,
    pointingMode: "near",
    valuesVisible: false
})
.setData(relational_03, { crosstabMode: false })
.render();</textarea>
<button id="pvcBar1TryMe" class="tryMe" onclick='tryMe(this)'>Try me</button>
</div>
<div><div id="pvcBar1" style="padding-left:30px;"></div></div>
</div>
</div>

<h3>A Rich Bar chart</h3>
A simple bar chart can be enhanced by setting properties to the panel, bars, axis or legends.<br>

<div class="tryItTable">
<div>
<div>
<textarea cols="55" rows="29" id="pvcBar2Code">
new pvc.BarChart({
    canvas: "pvcBar2",
    width:  400,
    height: 250,
    title: "Sample Bar chart",
    titlePosition: 'left',
    titleSize: {height: '100%'},
    titleMargins: 10,
    orientation:   'horizontal',
    animate:    false,
    clickable:  true,
    selectable: true,
    hoverable:  true,
    legend:     true,
    legendPosition: 'right',
    valuesVisible:   false,
    axisGrid: true,
    extensionPoints: {
        bar_lineWidth:     1,
        title_fillStyle:   'lightblue',
        titleLabel_font:   '16px sans-serif',
        title_strokeStyle: 'black',
        legend_fillStyle:  'green',
        yAxisRule_strokeStyle: 'blue'
    }
})
.setData(relational_01, {crosstabMode: false })
.render();</textarea>
<button class="tryMe" onclick='tryMe(this)'>Try me</button>
</div>
<div>
<div id="pvcBar2"></div>
</div>
</div>
</div>

<h3>A Bar chart with negative values</h3>
<div class="tryItTable">
<div>
<div>
<textarea cols="55" rows="15">
new pvc.BarChart({
    canvas: "pvcBar2b",
    width:  400,
    height: 300,
    title:  "Bar chart with negative values",
    animate:    true,
    clickable:  true,
    selectable: true,
    hoverable:  true,
    legend:     true,
    legendPosition: 'right',
    axisGrid: true,
    axisOffset:   0.04,
    valuesVisible:   false,
    extensionPoints: {
    	xAxisLabel_textAngle:    -1,
    	xAxisLabel_textAlign:    'right',
    	xAxisLabel_textBaseline: 'top'
    }
})
.setData(relational_01_neg, {crosstabMode: false })
.render();</textarea>
<button class="tryMe" onclick='tryMe(this)'>Try me</button>
</div>
<div>
<div id="pvcBar2b"></div>
</div>
</div>
</div>


<h3>A Stacked Bar chart</h3>
You can represent a third dimension of data through a stack bar chart. In this way, a single bar on the chart can show data for more than one category of data.<br>
To draw a stacked bar just set the stacked property to true. To a better understanding of the chart, consider configuring the Legend.<br>
<div class="tryItTable">
<div>
<div>
<textarea cols="55" rows="15" id="pvcBar3Code">
new pvc.BarChart({
    canvas:  "pvcBar3",
    width:   600,
    height:  350,
    title:   "Stacked Bar Chart",
    stacked:    true,
    barStackedMargin: 3,
    animate:    false,
    clickable:  true,
    selectable: true,
    hoverable:  true,
    legend:     true,
    legendPosition: 'right',
    orthoAxisFixedMax:   130,
    baseAxisTicks: true,
    extensionPoints: {
        xAxisTicks_strokeStyle: 'gray',
        rubberBand_strokeStyle: 'rgb(0,0,240)',
        rubberBand_fillStyle:   'rgba(0,0,255, 0.5)',
        rubberBand_lineWidth:   2.5
    }
})
.setData(relational_01, {crosstabMode: false })
.render();</textarea>
<button class="tryMe" onclick='tryMe(this)'>Try me</button>
</div>
<div>
        <div id="pvcBar3"></div>
</div>
</div>
</div>

        <h3>A stacked bar chart with negative values</h3>
<div class="tryItTable">
<div>
<div>
<textarea cols="55" rows="24" id="pvcBar3bCode">
new pvc.BarChart({
    canvas: "pvcBar3b",
    width:  400,
    height: 300,
    title:  "Stacked bar chart with negative values",
    titleFont:  'bold italic 14px sans-serif',
    titleSize:  {width: '60%', height: '25%'},
    //titleSizeMax:  {width: '60%'},
    titleMargins:  10,
    titlePaddings: {all: '15%', top: 10, bottom: 10},
    stacked:    true,
    animate:    true,
    clickable:  true,
    selectable: true,
    hoverable:  true,
    legend:     true,
    legendPosition: 'right',
    valuesVisible:   false,
    axisGrid: true,
    orthoAxisLabelSpacingMin: 2.5,
    extensionPoints: {
        title_fillStyle:   'rgba(0, 255, 0, 0.2)',
        title_strokeStyle: 'green'
    }
})
.setData(relational_01_neg, {crosstabMode: false })
.render();</textarea>
<button class="tryMe" onclick='tryMe(this)'>Try me</button>
</div>
<div>
        <div id="pvcBar3b"></div>
</div>
</div>
</div>


<h3>An horizontal Stacked Bar chart</h3>
The stacked bar chart of the previous example, but with an 'horizontal' orientation.<br>
<div class="tryItTable">
<div>
<div>
<textarea cols="55" rows="24" id="pvcBar4Code">
new pvc.BarChart({
    canvas: "pvcBar4",
    width:  400,
    height: 250,
    title:  "Stacked Bar Chart - Horizontal",
    titleFont:  'bold italic 16px sans-serif',
    titleAlign: 'left',
    orientation: 'horizontal',
    colorMap: {'Paris': 'pink'},
    stacked: true,
    timeSeries: true,
    animate: false,
    legend:  true,
    legendPosition: 'top',
    legendAlign:    'right',
    orthoAxisLabelSpacingMin: 2.5
})
.setData(relational_01, {crosstabMode: false })
.render();</textarea>
<button class="tryMe" onclick='tryMe(this)'>Try me</button>
</div>
<div>
        <div id="pvcBar4"></div>
</div>
</div>
</div>


        <h3>A stacked bar chart with line series</h3>
<div class="tryItTable">
<div>
<div>
<textarea cols="55" rows="15" id="pvcBar6Code">
new pvc.BarChart({
    canvas: "pvcBar6",
    width:  400,
    height: 250,
    title: "Stacked bar chart with line series",
    stacked: true,

    plot2: true,
    plot2Series: ['Paris'],
    plot2OrthoAxis: 2,
    plot2ColorAxis: 2,
    plot2NullInterpolationMode: 'linear',

    trendType: 'linear',
    trendOrthoAxis: 3,
    trendAreasVisible: true,

    animate:    true,
    clickable:  true,
    selectable: true,
    hoverable:  true,
    legend:     true,

    axisGrid: true,
    orthoAxisOffset: 0.1,
    extensionPoints: {
        plot2Line_lineWidth: 3,
        plot2Dot_shapeSize: 20,
        continuousAxisTicks_strokeStyle: 'red'
    }
})
.setData(relational_01_neg, { crosstabMode: false })
.render();</textarea>
<button class="tryMe" onclick='tryMe(this)'>Try me</button>
</div>
<div>
        <div id="pvcBar6"></div>
</div>
</div>
</div>


<h3>Yet Another Stacked Bar chart</h3>

Consumes crosstab data and contains null values<br>
<div class="tryItTable">
<div>
<div>
<textarea cols="55" rows="24" id="pvcBar5Code">
new pvc.BarChart({
    canvas: "pvcBar5",
    width:  700,
    height: 400,
    animate:    false,
    selectable: true,
    hoverable:  true,
    stacked:    true,
    valuesVisible: false,
    legend:     true,
    axisBandSizeRatio: 0.7,
    barSizeMax:     100,
    contentMargins: '5%'
})
.setData(crosstab_02)
.render();</textarea>
<button class="tryMe" onclick='tryMe(this)'>Try me</button>
</div>
<div>
        <div id="pvcBar5"></div>
</div>
</div>
</div>
</div>
  </body>
</html>
